<template>
  <div>
    <div class="appraise-wrap">
      <div class="left-box">
        <div class="user-select-wrap">
          <div class="search-wrap">
            <div class="select-tab">
              <div
                class="select-tab-item"
                :class="{ 'select-tab-item-active': tabActiveIndex === tabIndex }"
                @click="handleSeleceTab(tabIndex)"
                v-for="(tab, tabIndex) in tabList"
                :key="tab.name + tabIndex"
              >
                {{ tab.name }}
              </div>
            </div>
            <div class="search-input-box">
              <img class="search-icon" src="@/assets/images/home/search-icon.png" alt="" />
              <input
                class="input"
                placeholder="搜索菜品名"
                v-model.trim="foodListPageQuery.keywords"
                type="text"
                @input="onSearch"
              />
            </div>
          </div>
          <!-- 一级分类 -->
          <div class="paging-list-box">
            <div
              class="paging-list-item"
              :class="{ 'paging-list-item-active': pagingItem.isChecked }"
              @click="handleSelectPaging(pagingIndex, pagingItem)"
              v-for="(pagingItem, pagingIndex) in foodOneCateList"
              :key="pagingItem.id"
            >
              <el-tooltip effect="dark" :content="pagingItem.name" placement="top">
                <div class="name">{{ pagingItem.name }}</div>
              </el-tooltip>
            </div>
            <div class="paging-list-btn">
              <el-button
                class="left-btn"
                @click="oneCatePreviousPage"
                :disabled="oneCategoryPage === 1"
              >
                <img
                  :style="{ cursor: oneCategoryPage === 1 ? 'not-allowed' : 'pointer' }"
                  src="@/assets/images/home/page-left-icon.png"
                  alt=""
                />
              </el-button>
              <el-button
                class="right-btn"
                @click="oneCateNextPage"
                :disabled="oneCategoryPage >= foodOneCategoryLastPage"
              >
                <img
                  :style="{
                    cursor: oneCategoryPage >= foodOneCategoryLastPage ? 'not-allowed' : 'pointer'
                  }"
                  src="@/assets/images/home/page-right-icon.png"
                  alt=""
                />
              </el-button>
            </div>
          </div>
          <!-- 二级分类 -->
          <div class="tag-select-box" v-if="foodTwoCateList.length">
            <div class="tag-btn-list">
              <div
                class="tag-btn-item"
                :class="{ 'tag-btn-item-active': tagItem.isChecked }"
                @click="handleSelectTag(tagIndex, tagItem)"
                v-for="(tagItem, tagIndex) in foodTwoCateList"
                :key="tagItem.id"
              >
                {{ tagItem.name }}
              </div>
            </div>
            <div class="tag-paging-list-btn">
              <el-button
                class="left-btn"
                @click="twoCatePreviousPage"
                :disabled="twoCategoryPage === 1"
              >
                <img
                  :style="{ cursor: twoCategoryPage === 1 ? 'not-allowed' : 'pointer' }"
                  class="left-btn"
                  src="@/assets/images/home/page-left-icon.png"
                  alt=""
                />
              </el-button>
              <el-button
                @click="twoCateNextPage"
                class="right-btn"
                :disabled="twoCategoryPage >= foodTwoCategoryLastPage"
              >
                <img
                  :style="{
                    cursor: twoCategoryPage >= foodTwoCategoryLastPage ? 'not-allowed' : 'pointer'
                  }"
                  src="@/assets/images/home/page-right-icon.png"
                  alt=""
                />
              </el-button>
            </div>
          </div>
        </div>
        <!-- 菜品的滚动列表 -->
        <div class="desktop-scroll-list">
          <div class="scroll-list-item-wrap" v-if="!isEmptyFoodList" v-loading="listLoading">
            <div
              class="scroll-list-item"
              v-for="food in currentFoodList"
              :key="food.id"
              @click.stop="handleSelectFood(food)"
            >
              <el-image
                class="image"
                :src="food.images?.[0]?.file?.preview_url"
                fit="cover"
                :lazy="true"
              >
                <template #placeholder>
                  <div class="img-placeholder"></div>
                </template>
                <template #error>
                  <div class="not-good-image">
                    <img class="image" src="@/assets/images/home/not-goodimage.png" alt="" />
                  </div>
                </template>
              </el-image>
              <div class="desc-box">
                <el-tooltip class="item" effect="dark" :content="food.name" placement="top">
                  <div class="name">{{ food.name }}</div>
                </el-tooltip>
                <div class="money" v-if="!isEmpty(food.skuList)">
                  ￥{{ food.skuList[0].price }}/份
                </div>
                <!-- 数量估清才显示 -->
                <div class="count" style="color: #f56c6c">
                  <span v-if="food.num > 0">剩余：{{ food.num }}</span>
                  <span v-else-if="food.num === -1">剩余：无限制</span>
                  <span v-else>剩余：{{ food.num }}</span>
                </div>
              </div>
              <!-- 已售罄 -->
              <div class="positon-soldOut-box" v-if="food.num === 0">
                <img class="image" src="@/assets/images/home/yishouqing-icon.png" alt="" />
              </div>
            </div>
          </div>
          <!-- 暂无数据的组件 -->
          <div class="no-data-box" v-if="isEmptyFoodList">
            <NotData desc="暂无菜品数据" />
          </div>
        </div>
        <div class="pagination-box">
          <pagination
            v-show="foodListTotal > 0"
            :total="foodListTotal"
            v-model:page="foodListPageQuery.page"
            v-model:limit="foodListPageQuery.limit"
            @pagination="getFoodListData"
            :pageSizes="[15, 45, 75, 100]"
          />
        </div>
        <div class="desc-btn-box">
          <div class="desc"></div>
          <div
            class="clear-all-btn"
            v-if="tabActiveIndex !== 1 && !isEmptyFoodList"
            @click="handleShowFoodAppraiseDialog"
          >
            全部估清
          </div>
        </div>
      </div>
      <div class="right-box">
        <!-- 数量估清组件 -->
        <CountAppraise
          :selectNeedCountAppraiseFood="selectNeedCountAppraiseFood"
          v-if="tabActiveIndex === 1"
          @onConfirm="refreshFoodList"
        />
        <!-- 菜品估清组件 -->
        <FoodAppraise
          v-if="tabActiveIndex === 0"
          :selectActiveFoodList="selectActiveFoodList"
          @onConfirm="refreshFoodList"
        />
      </div>
    </div>

    <!-- 全部估清的提示弹窗 -->
    <AllFoodAppraiseDialog
      v-model:showDialog="showFoodAppraiseDialog"
      @onConfirm="refreshFoodList"
    />
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'
import { ElTooltip, ElButton } from 'element-plus'
import CountAppraise from './components/CountAppraise.vue'
import FoodAppraise from './components/FoodAppraise.vue'
import AllFoodAppraiseDialog from './components/AllFoodAppraiseDialog.vue'
import NotData from '@/components/NotData/Index.vue'
import Pagination from '@/components/Pagination/Index.vue'
import { isEmpty, debounce } from '@/utils/toolsValidate'
import { foodCountAppraise } from '@/api/appraise'
import { fetchFoodList, fetchfoodCategoryList } from '@/api/food'

// 切换顶部对应的tab的列表
const tabList = ref([{ name: '菜品沽清' }, { name: '限量沽清' }])
// 切换顶部对应的tab的选中的当前索引
const tabActiveIndex = ref(0)
// 左侧列表 loading
const listLoading = ref(false)
// 选中对应菜品4个分类的索引下标[全部,未售完,已售完,无限制]
const selectCateActiveIndex = ref(0)
// 二级分类：标签按钮点击选中索引下标
const tagActiveIndex = ref(-1)
// 一级分类
const foodOneCateList = ref([])
// 二级分类
const foodTwoCateList = ref([])
// 菜品列表分页相关
const foodListPageQuery = reactive({
  page: 1,
  limit: 15,
  category_id: null,
  keywords: null,
  // 菜品分类，默认是未售完
  num: 1
})
// 菜品分类列表分页相关
const foodCategoryPageQuery = reactive({
  page: 1,
  limit: 4,
  parent_id: 0
})
// 判断一级分类是否还能继续下一页操作分页
const foodOneCategoryLastPage = ref(0)
// 判断二级分类是否还能继续下一页操作分页
const foodTwoCategoryLastPage = ref(0)
// 一级分类的分页
const oneCategoryPage = ref(1)
// 一级分类的分页
const twoCategoryPage = ref(1)
// 已经估清完成的菜品集合
const selectActiveFoodList = ref([])
// 当前菜品列表数据
const currentFoodList = ref([])
// 是否显示全部估清的弹窗
const showFoodAppraiseDialog = ref(false)
// 选中当前需要进行数量估清的菜品
const selectNeedCountAppraiseFood = ref({})
// 菜品列表总数
const foodListTotal = ref(0)
// 菜品列表是否为空
const isEmptyFoodList = ref(false)

// 切换顶部对应的tab的选中索引
const handleSeleceTab = (index: number) => {
  tabActiveIndex.value = index
  selectNeedCountAppraiseFood.value = {}
}

// 获取菜品分类数据
// type为oneCate是一级分类，twoCate是二级分类
const getfoodCategoryListData = async (type = 'oneCate') => {
  if (type === 'oneCate') {
    foodCategoryPageQuery.page = oneCategoryPage.value
    // 重置父级id，一级分类的父级id默认是0
    foodCategoryPageQuery.parent_id = 0
    if (foodCategoryPageQuery.page === 1) {
      // 第一页都是limit为4的分页
      foodCategoryPageQuery.limit = 4
    } else {
      // 第二页以此类推都是limit为5的分页
      foodCategoryPageQuery.limit = 5
    }
  } else {
    // 二级分类的分页
    foodCategoryPageQuery.page = twoCategoryPage.value
    foodCategoryPageQuery.limit = 5
  }

  try {
    // 分类改为使用分类接口（与点菜页一致）
    const params: any = {
      parent_id: foodCategoryPageQuery.parent_id,
      page: foodCategoryPageQuery.page,
      limit: foodCategoryPageQuery.limit
    }
    const res: any = await fetchfoodCategoryList(params)
    if (type === 'oneCate') {
      if (oneCategoryPage.value === 1) {
        res.data.data.unshift({
          id: null,
          name: '全部'
        })
        res.data.data.forEach((item: any, idx: number) => {
          if (idx === 0) {
            item.isChecked = true
          }
        })
      } else {
        res.data.data.forEach((item: any) => {
          item.isChecked = false
        })
      }
      foodOneCateList.value = Array.isArray(res?.data?.data) ? res.data.data : []
      // 优先 last_page，否则用 total/per_page 计算
      if (typeof res?.data?.last_page === 'number') {
        foodOneCategoryLastPage.value = res.data.last_page
      } else if (typeof res?.data?.total === 'number' && typeof res?.data?.per_page === 'number') {
        foodOneCategoryLastPage.value = Math.ceil(res.data.total / res.data.per_page)
      } else {
        foodOneCategoryLastPage.value = 1
      }
    } else {
      ;(Array.isArray(res?.data?.data) ? res.data.data : []).forEach((item: any) => {
        item.isChecked = false
      })
      foodTwoCateList.value = Array.isArray(res?.data?.data) ? res.data.data : []
      if (typeof res?.data?.last_page === 'number') {
        foodTwoCategoryLastPage.value = res.data.last_page
      } else if (typeof res?.data?.total === 'number' && typeof res?.data?.per_page === 'number') {
        foodTwoCategoryLastPage.value = Math.ceil(res.data.total / res.data.per_page)
      } else {
        // 若无分页信息，按是否满额估计
        foodTwoCategoryLastPage.value =
          foodTwoCateList.value.length < foodCategoryPageQuery.limit
            ? twoCategoryPage.value
            : twoCategoryPage.value + 1
      }
    }
  } catch (error) {
    console.error('获取菜品分类失败:', error)
  }
}

// 获取菜品列表数据
const getFoodListData = async (paginationParams?: { page: number; limit: number }) => {
  // 如果传入了分页参数，则更新分页状态
  if (paginationParams) {
    foodListPageQuery.page = paginationParams.page
    foodListPageQuery.limit = paginationParams.limit
  }

  console.log('getFoodListData - foodListPageQuery:', foodListPageQuery)
  listLoading.value = true
  try {
    const res = await fetchFoodList(foodListPageQuery)
    console.log('getFoodListData - API response:', res)
    if (res.status === 200 && !isEmpty(res?.data)) {
      // 排空判断
      if (isEmpty(res.data?.data)) {
        currentFoodList.value = []
        foodListTotal.value = 0
        isEmptyFoodList.value = true
        return
      }
      currentFoodList.value = res.data.data
      foodListTotal.value = res.data.total
      isEmptyFoodList.value = res.data.total === 0
    }
  } catch (error) {
    console.error('获取菜品列表失败:', error)
  } finally {
    listLoading.value = false
  }
}

// 操作分页筛选对应的分类,一级分类
const handleSelectPaging = (index: number, item: any) => {
  foodOneCateList.value.forEach((v: any) => {
    v.isChecked = false
  })
  item.isChecked = true

  foodCategoryPageQuery.parent_id = item.id
  // 查询二级分类
  getfoodCategoryListData('twoCate')
  foodListPageQuery.category_id = item.id || null
  // 重置二级分类的下标和分页
  resetTwoCateAction()
  // 重置菜品列表的分页
  resetFoodListPage()
  // 获取菜品列表数据
  getFoodListData()
}

// 选择对应的标签按钮，查询对应的分类，二级分类
const handleSelectTag = (index: number, item: any) => {
  foodTwoCateList.value.forEach((v: any) => {
    v.isChecked = false
  })
  item.isChecked = true
  foodListPageQuery.category_id = item.id || null
  // 重置菜品列表的分页
  resetFoodListPage()
  // 获取菜品列表数据
  getFoodListData()
}

// 选中对应的菜品，进行估清
const handleSelectFood = async (datas: any) => {
  if (datas.num === 0) return
  // 数量估清
  if (tabActiveIndex.value === 1) {
    selectNeedCountAppraiseFood.value = datas
    return
  }
  const pramas = {
    food_id: datas.id,
    num: 0
  }
  try {
    const res = await foodCountAppraise(pramas)
    if (res.status === 200) {
      // 已估清的菜品列表
      getFoodAppraiseList()
      datas.num = 0
      // 获取菜品列表数据
      getFoodListData()
    }
  } catch (error) {
    console.error('菜品估清失败:', error)
  }
}

// 一级分类上一页操作
const oneCatePreviousPage = () => {
  if (oneCategoryPage.value === 1) return
  oneCategoryPage.value -= 1
  // 重置一级分类索引和菜品列表分页
  resetOneCate()
  // 重置二级分类的下标和分页
  resetTwoCateAction()
  getfoodCategoryListData('oneCate')
}

// 一级分类下一页操作
const oneCateNextPage = () => {
  if (oneCategoryPage.value >= foodOneCategoryLastPage.value) return
  oneCategoryPage.value += 1
  // 重置一级分类索引和菜品列表分页
  resetOneCate()
  // 重置二级分类的下标和分页
  resetTwoCateAction()
  getfoodCategoryListData('oneCate')
}

// 重置一级分类索引和菜品列表分页
const resetOneCate = () => {
  // 重置菜品列表的分页
  foodListPageQuery.page = 1
  // 重置分类id
  foodListPageQuery.category_id = null
  // 获取菜品列表数据
  getFoodListData()
}

// 重置二级分类索引和菜品列表分页
const resetTwoCate = () => {
  // 重置索引
  tagActiveIndex.value = -1
  // 重置分类id
  foodListPageQuery.category_id = null
  // 重置菜品列表的分页
  foodListPageQuery.page = 1
  // 获取菜品列表数据
  getFoodListData()
}

//  二级分类上一页操作
const twoCatePreviousPage = () => {
  if (twoCategoryPage.value === 1) return
  twoCategoryPage.value -= 1
  resetTwoCate()
  getfoodCategoryListData('twoCate')
}

// 二级分类下一页操作
const twoCateNextPage = () => {
  if (twoCategoryPage.value >= foodTwoCategoryLastPage.value) return
  twoCategoryPage.value += 1
  resetTwoCate()
  getfoodCategoryListData('twoCate')
}

// 重置二级分类的下标和分页
const resetTwoCateAction = () => {
  tagActiveIndex.value = -1
  twoCategoryPage.value = 1
}

// 搜索菜品列表
const onSearch = debounce(() => {
  foodListPageQuery.page = 1
  getFoodListData()
}, 300)

// 重置菜品列表的分页
const resetFoodListPage = () => {
  // 重置菜品列表的分页
  foodListPageQuery.page = 1
}

// 估清完成，刷新菜品列表
const refreshFoodList = () => {
  // 获取菜品列表数据
  getFoodListData()
  // 已估清的菜品列表
  getFoodAppraiseList()
}

// 获取已经估清的菜品列表
const getFoodAppraiseList = async () => {
  const datas = {
    num: 0
  }
  try {
    const res = await fetchFoodList(datas)
    if (res.status === 200) {
      res.data.forEach((item: any) => {
        item.isChecked = false
      })
      selectActiveFoodList.value = res.data
    }
  } catch (error) {
    console.error('获取已估清菜品列表失败:', error)
  }
}

// 显示全部估清的弹窗
const handleShowFoodAppraiseDialog = () => {
  console.log('全部估清按钮被点击')
  showFoodAppraiseDialog.value = true
}

onMounted(() => {
  // 获取菜品列表数据
  getFoodListData()
  // 获取菜品分类数据
  getfoodCategoryListData()
  // 获取已经估清的菜品列表
  getFoodAppraiseList()
})
</script>

<style lang="scss" scoped>
.appraise-wrap {
  display: flex;
  align-items: flex-start;
  gap: 30px; // 使用gap替代margin，更现代的布局方式
  min-height: calc(100vh - 220px); // 设置最小高度，减去顶部导航和边距
  height: 100%;
  padding: 20px; // 添加整体内边距

  .left-box {
    width: 976px;
    min-height: calc(100vh - 220px); // 设置最小高度
    height: 100%;
    background: #ffffff;
    border-radius: 20px;
    box-shadow: 3px 0px 24px 0px rgba(0, 0, 0, 0.16);
    box-sizing: border-box;
    transition: all 1s;
    display: flex;
    flex-direction: column;
    flex-shrink: 0; // 防止压缩

    .user-select-wrap {
      padding: 20px 30px;
      box-shadow: 0px 4px 6px 0px rgba(0, 0, 0, 0.04);
      flex-shrink: 0; // 防止压缩
      background: #ffffff;
      border-radius: 20px 20px 0 0;
      .search-wrap {
        display: flex;
        align-items: center;
        justify-content: space-between;
        .select-tab {
          display: flex;
          align-items: center;
          .select-tab-item {
            width: 162px;
            height: 50px;
            line-height: 50px;
            border: 1px solid #333333;
            border-radius: 12px;
            font-size: 18px;
            font-family:
              PingFang SC,
              PingFang SC-Regular;
            font-weight: 400;
            text-align: center;
            color: #333333;
            margin-right: 30px;
            cursor: pointer;
          }
          .select-tab-item-active {
            background: #7c0a03;
            border: none;
            color: #fff;
            width: 164px;
            height: 52px;
            line-height: 52px;
          }
          .select-tab-item:last-child {
            margin-right: 0;
          }
        }
        .search-input-box {
          width: 240px;
          height: 46px;
          border: 1px solid #d2d2d2;
          border-radius: 25px;
          box-sizing: border-box;
          display: flex;
          align-items: center;
          padding-left: 20px;
          transition: all 1s;

          .search-icon {
            flex-shrink: 0;
            width: 24px;
            height: 24px;
          }
          .input {
            border: none;
            outline: none;
            width: 160px;
            font-size: 16px;
            font-family:
              PingFang SC,
              PingFang SC-Regular;
            font-weight: 400;
            text-align: left;
            color: #333;
            margin-left: 10px;
          }
        }
      }
      .paging-list-box {
        position: relative;
        box-sizing: border-box;
        width: 820px;
        height: 48px;
        background: #ffffff;
        border: 1px solid #d0d0d0;
        border-radius: 25px;
        display: flex;
        align-items: center;
        margin-top: 20px;
        transition: all 1s;

        .paging-list-item {
          display: inline-block;
          padding: 0 30px;
          height: 48px;
          line-height: 48px;
          font-size: 16px;
          font-family:
            PingFang SC,
            PingFang SC-Regular;
          font-weight: 400;
          text-align: center;
          color: #333333;
          cursor: pointer;
          .name {
            max-width: 80px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }
        }
        .paging-list-item-active {
          color: #ffffff;
          background: #7c0a03;
          border-radius: 24px;
        }
        .paging-list-btn {
          position: absolute;
          top: 12px;
          right: 16px;
          display: flex;
          align-items: center;
          .left-btn,
          .right-btn {
            padding: 0;
            border: none;
            background: transparent;
            outline: none;
            > span {
              display: block;
              width: 30px;
              height: 50px;
              > img {
                flex-shrink: 0;
                width: 24px;
                height: 24px;
                cursor: pointer;
              }
            }
          }
          .left-btn {
            margin-right: 20px;
          }
        }
      }
      .tag-select-box {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-top: 20px;
        transition: all 1s;

        .tag-btn-list {
          display: flex;
          align-items: center;
          max-width: 700px;
          box-sizing: border-box;
          .tag-btn-item {
            min-width: 116px;
            height: 40px;
            line-height: 40px;
            border: 1px solid #d2d2d2;
            border-radius: 12px;
            font-size: 16px;
            font-family:
              PingFang SC,
              PingFang SC-Regular;
            font-weight: 400;
            text-align: center;
            color: #666666;
            cursor: pointer;
            margin-right: 24px;
          }
          .tag-btn-item-active {
            border-color: #7c0a03 !important;
            color: #7c0a03 !important;
          }
          .tag-btn-item:last-child {
            margin-right: 0;
          }
        }
        .tag-paging-list-btn {
          display: flex;
          align-items: center;
          .left-btn,
          .right-btn {
            padding: 0;
            border: none;
            background: transparent;
            outline: none;
            > span {
              display: block;
              width: 24px;
              height: 24px;
              > img {
                flex-shrink: 0;
                width: 24px;
                height: 24px;
                cursor: pointer;
              }
            }
          }
          .left-btn {
            margin-right: 20px;
          }
        }
      }
    }

    .desktop-scroll-list {
      padding: 0 24px 0 24px;
      flex: 1; // 占据剩余空间
      min-height: 400px; // 设置最小高度
      max-height: calc(100vh - 420px); // 设置最大高度，避免超出屏幕
      box-sizing: border-box;
      overflow-y: auto;
      transition: all 1s;

      .scroll-list-item-wrap {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        justify-content: space-between;
        .scroll-list-item {
          position: relative;
          display: flex;
          align-items: flex-start;
          width: 300px;
          height: 130px;
          background: #f4f4f4;
          border-radius: 12px;
          box-sizing: border-box;
          margin-top: 20px;
          cursor: pointer;
          .image {
            flex-shrink: 0;
            width: 173px;
            height: 130px;
            border-radius: 12px 0 0 12px;
            margin-right: 10px;
            object-fit: cover;
          }
          .img-placeholder {
            width: 173px;
            height: 130px;
            border-radius: 12px 0 0 12px;
            margin-right: 10px;
            background: #f5f7fa;
            display: flex;
            align-items: center;
            justify-content: center;
          }
          .not-good-image {
            width: 173px;
            height: 130px;
            border-radius: 12px 0 0 12px;
            margin-right: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            .image {
              flex-shrink: 0;
              width: 124px;
              height: 124px;
            }
          }
          .desc-box {
            padding-top: 12px;
            .name {
              width: 90px;
              text-overflow: ellipsis;
              white-space: nowrap;
              overflow: hidden;
              font-size: 18px;
              font-family:
                PingFang SC,
                PingFang SC-Bold;
              font-weight: 700;
              color: #30314a;
            }
            .money {
              font-size: 14px;
              font-family:
                PingFang SC,
                PingFang SC-Bold;
              font-weight: 700;
              color: #333333;
              margin-top: 10px;
            }
            .count {
              font-size: 14px;
              font-family:
                PingFang SC,
                PingFang SC-Regular;
              font-weight: 400;
              text-align: left;
              color: #333333;
              margin-top: 30px;
            }
          }
        }
        .choose-img {
          position: absolute;
          right: 12px;
          bottom: 12px;
          width: 24px;
          height: 24px;
          z-index: 2;
        }
        // 已售罄
        .positon-soldOut-box {
          position: absolute;
          left: 0;
          top: 0;
          width: 300px;
          height: 130px;
          background: rgba(0, 0, 0, 0.5);
          border-radius: 12px;
          display: flex;
          align-items: center;
          justify-content: center;
          z-index: 1;
          .image {
            flex-shrink: 0;
            width: 142px;
            height: 117px;
          }
        }
      }
    }
    .scroll-list-item-wrap::after {
      content: '';
      width: 300px;
    }
    //滚动条整体的大小
    .desktop-scroll-list::-webkit-scrollbar {
      width: 6px;
      height: 0;
    }
    //滚动条里滑动的滑块
    .desktop-scroll-list::-webkit-scrollbar-thumb {
      height: 200px;
      background: #d2d2d2;
      border-radius: 3px;
    }
    //滚动条底层样式
    .desktop-scroll-list::-webkit-scrollbar-track {
      display: none;
    }
    .desc-btn-box {
      display: flex;
      align-items: center;
      justify-content: space-between;
      // width: 976px;
      height: 92px;
      background: #ffffff;
      border-radius: 0px 0px 20px 20px;
      box-shadow: 0px -4px 6px 0px rgba(0, 0, 0, 0.04);
      box-sizing: border-box;
      padding: 0 30px;
      flex-shrink: 0; // 防止压缩
      .desc {
        font-size: 16px;
        font-family:
          PingFang SC,
          PingFang SC-Regular;
        font-weight: 400;
        color: #333333;
        justify-self: start;
      }
      .clear-all-btn {
        width: 154px;
        height: 50px;
        background: #ffffff;
        border: 1px solid #333333;
        border-radius: 12px;
        line-height: 50px;
        font-size: 18px;
        font-family:
          PingFang SC,
          PingFang SC-Regular;
        font-weight: 400;
        text-align: center;
        color: #333333;
        cursor: pointer;
      }
      .clear-all-btn:hover {
        color: #7c0a03;
        border-color: #7c0a03;
      }
    }
  }
  .right-box {
    flex: 1; // 占据剩余空间
    max-width: 976px; // 限制最大宽度
    min-height: calc(100vh - 200px); // 设置最小高度
    height: 100%;
    display: flex;
    flex-direction: column;
  }
}
.pagination-box {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  height: 60px;
  padding-right: 30px;
  flex-shrink: 0; // 防止压缩
  background: #ffffff;
  border-top: 1px solid #f0f0f0;
}
.no-data-box {
  margin-top: 200px;
}
</style>
